<template>
  <div>
    <el-row class="home">
      <el-col :span="5" style="display: flex; flex-direction: row; justify-content:center;align-items: center; padding-top: 10px">
        <el-image style="width: 50px; height: 50px;" :src="require('assets/img/guagua_logo128.png')" :fit="fill"></el-image>
        <span class="logo_font"> 瓜瓜小说 </span>
      </el-col>
      <el-col :span="10" style="padding-left:  50px">
        <el-menu
            class="menu_font"
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
            active-text-color="#B04E09">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">分类</el-menu-item>
          <el-menu-item index="3">排行榜</el-menu-item>
          <el-menu-item index="4">笔记</el-menu-item>
          <el-menu-item index="5"><a style='text-decoration:none;' href="http://www.guaguablog.cn">博客</a></el-menu-item>
        </el-menu>
      </el-col >
      <el-col :span="3">
          <el-input placeholder="请输入搜索内容..." prefix-icon="el-icon-search" v-model="input" style="margin-top: 20px;" size="small"></el-input>
      </el-col>
      <el-col :span="5" class="icon">
        <i class="el-icon-info"></i>
        <i class="el-icon-message-solid"></i>
        <i class="el-icon-s-custom"></i>
        <el-button type="danger" style="margin-top: 20px" size="small" @click="openLogin">登录</el-button>
      </el-col>
    </el-row>
    <el-dialog
        title="欢迎登录"
        :visible.sync="dialogVisible"
        width="25%"
        :before-close="handleClose"
    >
      <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRuleForm"  class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="loginRuleForm.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" >
          <el-input v-model="loginRuleForm.password" prefix-icon="el-icon-lock" placeholder="密码" show-password></el-input>
        </el-form-item>
        <el-form-item style="">
          <el-button type="danger" @click="dialogVisible = false" style="width: 40%;margin-right: 5%">注册</el-button>
          <el-button type="danger" @click="dialogVisible = false" style="width: 40%"@click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {login} from 'api/login';
  import Cookies from "js-cookie";
  export default {
    name: "Home",
    data() {
      return {
        activeIndex: "1",
        msg: '',
        input: '',
        dialogVisible: false,
        loginRuleForm: {
          username: 'admin',
          password: '123456'
        },
        loginRules: {
          username: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handleSelect(key, keyPath){
        console.log(key, keyPath, 999);
      },
      handleClose() {
        this.dialogVisible = false
      },
      openLogin(){
        this.dialogVisible = true
      },
      handleLogin() {
        this.$refs.loginRuleForm.validate(valid => {
          if (valid) {
            Cookies.set("username", this.loginRuleForm.username, { expires: 30 });
            Cookies.set("password", this.loginRuleForm.password, { expires: 30 });
            login(this.loginRuleForm).then(res => {
              this.$message.success("登录成功")
            })
            // this.$store
            //   .dispatch("Login", this.loginRuleForm)
            //   .then(() => {
            //     this.$message.success("登陆成功")
            //   })
          }
        });
      }
    },
    created() {
      getBook().then(res => {
        this.msg = res.data;
      })
    }
  }
</script>


<style scoped>

  .home {
    border-bottom: 1px #E6E6E6 solid;
  }

  .logo_font {
    font-size: 28px;
    color: #B04E09;
    font-family: 楷体;
    margin-left: 15px;
  }

  .menu_font{
    margin-top: 11px;
  }

  .icon{
    float: right;
  }

  .icon i {
    font-size: 24px;
    margin-right: 40px;
  }

  /deep/.el-input__inner {
    border-radius: 10px !important;
  }

</style>
